<template>
    <div style="background:#f3f3f3" >
        <header >
            <a @click="$api.goBack()" class="back"></a>
            <span>食谱</span>
            <a @click="addRecipe" v-if="useInfo.tsMenuList[9].voOperate.addObj" class="add">添加</a>
        </header>
        <div class="absolute_wrap">
            <mt-loadmore :autoFill='false' :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="allLoaded">
                <ul>
                    <li v-for='(item,index) in showData' class="wrap">
                        <div class="personal flex_wrap">
                            <div class="touxiang">
                                <img :src="$api.formatterImg(item.userPhoto)" />
                            </div>
                            <div class="useinfo" style="width:7.2rem;">
                                <div class="usename">{{item.userName}}</div>
                                <p class="dianping" >{{item.content}}</p>
                            </div>
                        </div>
                        <div class="img_wrap" >
                            <img  v-for='(img,index) in item.filePathList' @click.stop="$api.showImgDetail(img.filePath)" :class="{height_auto:item.filePathList.length==1,minImage:item.filePathList.length!=1}" v-if="img.fileType==1" :src=$api.formatterImg(img.filePath) />
                        </div>
                        <div class="audio_wrap">
                            <audio v-for='(audio,index) in item.filePathList' v-if="audio.fileType==2"  :src=audio.filePath ></audio>
                        </div>
                        <div class="time">{{new Date(item.createTime).Format('yyyy-MM-dd hh:mm')}}
                            <a class="delete" v-if="canDelete(item.userId)" @click="deleteThings(1,item.recipeId)" >删除</a>
                        </div>
                        
                        <div class="dongtai_action">
                            <!-- :class="{ active: item.zan,}" -->
                            <div class="zan"  :class="{ active: ifZan(item.tsRecipeUserList)}" @click="clickZan(index)" >
                                <i></i><div>赞</div>
                            </div>
                            <div class="pinglun">
                                <i></i><div @click="comment(item.recipeId)">评论</div>
                            </div>
                            <div class="share">
                                <i></i><div @click="$api.share(item)">分享</div>
                            </div>
                        </div>
                        <div class="dongtai_zan" :class="{active:item.tsRecipeUserList.length}">
                            <i></i><span class="name" v-for='(people,index) in item.tsRecipeUserList' v-if= 'index < 5'>{{people.userName}} </span>
                            <span class="to_more" v-if="item.tsRecipeUserList.length>=5" >等{{item.tsRecipeUserList.length}}个人觉得很赞!</span>
                        </div>
                        <div class="pinglun_list_wrap" :class="{active:item.tsRecipeCommentInfoList&&item.tsRecipeCommentInfoList.length}">
                            <ul class="pinglun_list">
                                <li v-for='(row,i) in item.tsRecipeCommentInfoList'>
                                    <div class="pinglun_wrap" @click="huifu(row.recipeCommentInfoId,row.pid,row.pidPath,i,row.userName)">
                                        <div>
                                            <span class="name">{{row.userName}}</span>
                                            <span>:</span>
                                            <span class="neirong" v-html="row.bodyComment"></span>
                                        </div>
                                        <a class="delete" v-if="canDelete(row.userId)" @click.stop="deleteThings(2,row.recipeCommentInfoId)">删除</a>
                                    </div>
                                    <div v-for="(row1,i) in row.voTsRecipeCommentReplyInfoList" @click="huifu(row1.recipeCommentInfoId,row1.pid,row1.pidPath,i,row.userName)" class="huifu_wrap">
                                        <div>
                                            <span class="name">{{row1.userName}}</span>
                                            <span class="huifu" v-if="row1.userNameRep">回复</span>
                                            <span class="name">{{row1.userNameRep}}</span>
                                            <span>:</span>
                                            <span class="neirong" v-html="row1.bodyComment"></span>
                                        </div>
                                        <a class="delete" v-if="canDelete(row1.userId)" @click.stop="deleteThings(3,row1.recipeCommentReplyInfoId)">删除</a>
                                    </div>
                                    
                                    
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </mt-loadmore>                
        </div>
        <mt-popup
        v-model="showcomment"
        style="width:100%;"
        position="bottom">
        <div class="comment_wrap">
            <input v-model="messagerValue" maxlength="200" :placeholder="inputPlaceholder" v-focus="showcomment" />
            <mt-button size="small" :disabled="!messagerValue.trim()" type="primary" @click="messagerConfirm()" >确定</mt-button>
        </div>
        </mt-popup>
    </div>
</template>
<script>
    import {
        MessageBox
    } from 'mint-ui'
    export default {
        name: "footShow",
        data() {
            return {
                useInfo: {},
                showData: [],
                allLoaded: false,
                pageNum: 1,
                pageSize: 10,
                inputPlaceholder: '',
                showcomment: false,
                messagerValue: '',
            };
        },
        methods: {
            messagerConfirm() {
                this.showcomment = false;
                this.messagerCallback(this.$api.utf16toEntities(this.messagerValue));
                this.messagerValue = '';
            },
            showPinglun(callback) {
                this.showcomment = true;
                this.messagerCallback = callback
            },
            clickZan: function(index) {
                var j = this.ifZan(this.showData[index].tsRecipeUserList);
                var array = this.showData[index].tsRecipeUserList;
                var url = '';
                if (j) {
                    array.splice(j - 1, 1);
                    url = "recipeUser/remove"
                } else {
                    array.push({
                        userId: this.useInfo.userId,
                        userName: this.useInfo.userName,
                    })
                    url = "recipeUser/add"
                }
                var params = {
                    recipeId: this.showData[index].recipeId,
                    userId: this.useInfo.userId,
                };
                this.$api.post(url, params, (data) => {
                    console.log('点赞成功');
                })
            },
            comment: function(id) { //评论
                var params = {
                    userId: this.useInfo.userId,
                    recipeId: id,
                };
                this.inputPlaceholder = ''
                this.showPinglun((value) => {
                    params.bodyComment = value; //参数评论内容
                    var url = 'recipeCommentInfo/add'
                    this.$api.post(url, params, (data) => {
                        this.getList();
                    })
                })
            },
            addRecipe() {
                this.$router.push({
                    path: 'g24_1'
                })
            },
            huifu(id, pid, pidPath, index, userName) { //回复
                if (!pid) {
                    pid = '';
                }
                if (userName) {
                    this.inputPlaceholder = '回复' + userName + ':'
                } else {
                    this.inputPlaceholder = ''
                }
                var params = {
                    recipeCommentInfoId: id,
                    userId: this.useInfo.userId,
                    pid: pid,
                    pidPath: pidPath + ',' + this.useInfo.userId,
                };
                this.showPinglun((value) => {
                    params.bodyComment = value; //参数评论内容
                    var url = 'recipeCommentReplyInfo/add'
                    this.$api.post(url, params, (data) => {
                        this.getList();
                    })
                })
            },
            ifZan(list) {
                var state = false
                list.forEach((element, index) => {
                    if (element.userId == this.useInfo.userId) {
                        state = index + 1;
                    }
                });
                return state;
            },
            canDelete(useID) {
                if (useID == this.useInfo.userId || this.useInfo.userTypeId == 1) {
                    return true;
                } else {
                    return false;
                }
            },
            deleteThings(type, id) { //删除动态,评论,回复
                console.log(type, id);
                MessageBox.confirm('确定要删除?').then(o => {
                    switch (type) {

                        case 1: //删除动态
                            var params = {
                                recipeId: id,
                            };
                            console.log(JSON.stringify(params));
                            var url = 'recipe/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                        case 2: //删除评论
                            var params = {
                                recipeCommentInfoId: id,
                            };
                            console.log(JSON.stringify(params));
                            var url = 'recipeCommentInfo/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                        case 3: //删除回复
                            var params = {
                                recipeCommentReplyId: id,
                            };
                            console.log(JSON.stringify(params));
                            var url = 'recipeCommentReplyInfo/remove'
                            this.$api.post(url, params, (data) => {
                                this.getList();
                            })
                            break;
                    }
                })

            },
            loadBottom() {
                this.pageNum++;
                this.getList('push');
            },
            getList(push) { //刷新页面数据
                if (!push) {
                    this.pageNum = 1;
                }
                var url = 'recipe/selectPage'
                var params = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    schoolId: this.useInfo.schoolId,
                }
                this.$api.post(url, params, (data) => {
                    if (push) {
                        data.info.list.forEach(element => {
                            this.showData.push(element);
                        })
                    } else {
                        this.showData = data.info.list;
                    }
                    if (data.info.total == this.showData.length) {
                        this.allLoaded = true;
                    }
                    this.$refs.allLoaded.onBottomLoaded();
                    console.log('123', JSON.parse(JSON.stringify(this.showData)));
                })
            }
        },
        created() {
            this.useInfo = JSON.parse(sessionStorage.getItem('useInfo'));
            this.getList();
        }
    }
</script>
<style scoped>
    .wrap {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        text-align: left;
        padding: 0.2rem;
        padding-left: 0.4rem;
        font-size: 0.3rem;
        background: white;
        margin-bottom: 0.2rem;
    }
    
    .text {
        font-size: 0.4rem;
        width: 100%;
        color: #161616;
        margin-bottom: 0.18rem;
    }
    
    .time {
        width: auto;
        height: 0.55rem;
        font-size: 0.3rem;
        color: #a6a6a6;
    }
    
    .delete {
        color: #0489ff;
        margin-left: 0.25rem;
    }
    
    .audio_wrap {
        width: 100%;
        height: auto;
    }
    
    .audio_wrap audio {
        width: 7rem;
    }
    
    .dongtai_action {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        font-size: 0.4rem;
        color: #5e5e5e;
        border-top: 1px solid #ebebeb;
    }
    
    .dongtai_action i {
        margin-top: 0.14rem;
        margin-right: 0.2rem;
    }
    
    .zan {
        display: flex;
        width: 2.2rem;
        height: 100%;
        justify-content: center;
    }
    
    .zan.active div {
        color: #0489ff;
    }
    
    .zan.active i {
        background-image: url('../../static/images/dongtai/3@2x.png');
    }
    
    .zan i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/5@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .pinglun {
        width: 4rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .pinglun i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/4@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .share {
        width: 3rem;
        display: flex;
        height: 100%;
        justify-content: center;
    }
    
    .share i {
        display: block;
        width: 0.6rem;
        height: 0.6rem;
        background-image: url('../../static/images/dongtai/1@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan {
        display: none;
        border-top: 1px solid #ebebeb;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
    }
    
    .dongtai_zan.active {
        display: flex;
    }
    
    .dongtai_zan i {
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        margin-top: 0.18rem;
        margin-right: 0.2rem;
        background-image: url('../../static/images/dongtai/7@2x.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    
    .dongtai_zan .name {
        margin-left: 0.1rem;
    }
    
    .pinglun_list_wrap {
        border-top: 1px solid #ebebeb;
        width: 100%;
    }
    
    .huifu_wrap {
        padding-left: 0.6rem;
    }
    
    .pinglun_list .delete {
        color: #9f9f9f;
    }
</style>